var main = document.querySelector('main')
var xhr = new XMLHttpRequest()
xhr.open('get', 'http://chst.vip:1234/api/getcategorytitle')
xhr.send()
xhr.onreadystatechange = function () {
    if (xhr.status === 200 && xhr.readyState === 4) {
        var x = JSON.parse(xhr.responseText).result
        console.log(x)
        var html = ""
        x.forEach((item) => {
            html += `<div>${item.title}<span></span></div><ul><li></li></ul>`
        })
        main.innerHTML = html
        // console.log(main)
        //对main里面的div设置格式
        var maindiv = document.querySelectorAll('main>div')
        // console.log(maindiv)
        maindiv.forEach((item) => {
            item.style.fontSize = ".45rem"
            item.style.lineHeight = "1.056rem"
            item.style.paddingLeft = '.36rem'
            item.style.position = "relative"
            item.style.background='#f1f1f1'
        })
        //给对main里面的div设置点击让ul变化的事件(使用jq方法)
    $('main>div').click(function(){
            var suoyin=$(this).index('main>div')
            console.log($('main>div').eq(suoyin))
            $('main>div').eq(suoyin).next().slideToggle(10)
            $('main>div').eq(suoyin).next().css({display:'flex'}) //   ？？？此处动画事件改为1000时，ul出现会闪跳
            $('main>div').eq(suoyin).next().siblings('ul').css({display:'none'})  
    })
    
        //给main里面的div中的span倒三角设置格式
        var mainspan = document.querySelectorAll('main>div>span')
        //  console.log(mainspan)
        mainspan.forEach((item) => {
            item.innerText = '▼'
            item.style.position = "absolute"
            item.style.right = "0.5rem"
            item.style.top = "0.1rem"
        })

        var mainul = document.querySelectorAll('main>ul')
         console.log(mainul)
        mainul.forEach((item)=>{
            item.style.background="#fff"
            item.style.flexWrap='wrap'
              item.style.display='flex'
            item.style.display='none'
         
        })
        
        var arrmainul = [...mainul]
        // console.log(arrmainul)
        //arrmainul是ul的数组集合
        arrmainul.map((item, index) => {
            // console.log(item)
            // console.log(index)
            var xhrli = new XMLHttpRequest()
            xhrli.open('get', 'http://chst.vip:1234/api/getcategory?titleid=' + index)
            xhrli.send()
            xhrli.onreadystatechange = function () {
                if (xhrli.status === 200 && xhrli.readyState === 4) {
                    var y = JSON.parse(xhrli.responseText).result
                    console.log(y)
                    var html2 = ""
                    y.forEach((item2) => {
                        html2 += `<li value=${item2.categoryId}>${item2.category}</li>`
                        arrmainul[index].innerHTML = html2
                    })
                    //给main的ul中的li设置格式
                    var mainli = document.querySelectorAll('main>ul>li')
                   console.log(mainli)
                   
                    mainli.forEach((item) => {
                        item.style.height='1.0667rem'
                        item.style.width='2.5rem'
                        //   item.style.float="left"
                        item.style.textAlign='center'
                       item.style.lineHeight='1.0667rem'
                       item.style.border='0.02667rem solid #ccc'
                       item.style.boxSizing='border-box'
                        //给 li设置点击跳转事件
                        item.onclick=function(){
                            let categoryid=this.getAttribute('value')
                            console.log(this.innerText)
                            var y=this.innerText
                            location.href=`../pages/1跳转页.html?categoryid=${categoryid}&span11=${y}`
                        }
                    })
                }
            }
        })


    }
}
//书写返回index.html功能
var fanhui=document.querySelector('header>a')
fanhui.onclick=function(){
    location.href="../index.html"
}
